<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
Vue初识
1.1 一个vue实例只能接管一个容器,如<div id ='root'.../> 只能对应一个new Vue实例，一一对应关系。
1.2 真实开发中只有一个Vue实例，并且配合着一些组件去工作的。
1.3 {{xxxx}}中xxxx是一个js表达式例如：变量表达式 a 、a+b；函数表达式 demo(1)；Date.now()函数表达式。
1.4 实例中的数据一旦更新，页面上的所有用到该数据的地方都会更新,例如new Vue实例中data下的数据更新，则容器中的数据就会更新。 容器：div等

-->
<body>

    <!--准备好一个容器-->
    <div id="root">
        <h1>Hello {{name}} {{address}} {{name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //取消 Vue 所有的日志与警告。
        //    创建好一个Vue实例
        new Vue({
            el:'#root', //el :vue的一个配置，用于将vue实例与容器作绑定
            data:{  //data:vue的一个配置，用于存放数据
                name:'world',
                address:'我在1西安'
            }
        })
    </script>
</body>
</html>